<template>
  <el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
    <el-form size="small" :model="form" :rules="rules" label-width="120px" ref="ruleRefForm">
        <el-form-item label="商品分类" prop="catelogId">
            <el-cascader v-model="form.catelogId" :options="classifyList" :props="{value: 'id', label: 'name'}"></el-cascader>
        </el-form-item>
        <el-form-item label="规格名称:" prop="attrName">
            <el-input placeholder="请输入规格名称" v-model="form.attrName"></el-input>
        </el-form-item>
        <el-form-item label="规格值:">
            <el-row align="middle" style="flex-wrap:wrap;">
                <el-tag v-for="(value, idx) in form.values" :key="value.id" closable size="default" style="margin-right:10px" effect="plain" @close="delSpec(idx)">{{value}}</el-tag>
                <el-input style="width: 193px;margin-right:5px;" v-show="isAddSpecValue" v-model="specItem" placeholder="请输入"></el-input>
                <el-button size="small" type="primary" v-show="!isAddSpecValue" @click="addSpecValue" plain>添加</el-button>
                <el-button size="small" type="primary" v-show="isAddSpecValue" @click="confirmAddSpecValue" plain>确认</el-button>
                <el-button size="small" v-show="isAddSpecValue" @click="cancelAdd">取消</el-button>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleRefForm)" size="small">提交</el-button>
			<el-button @click="resetForm(ruleRefForm)" size="small">取消</el-button>
        </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs,ref } from 'vue'
import { ElMessage } from 'element-plus'
import { create,update } from '/@/api/pms/attr'
export default {
    name: 'SpecDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '新增规格'
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        classifyList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    setup(props, context) {
        const { dialogDrawer, defaultForm } = toRefs(props)
		 const ruleRefForm = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let form = computed({
            get: () => defaultForm.value,
            set: val => {
               context.emit('update:defaultForm', val) 
            }
        })
        const state = reactive({
            rules: {
                attrName: [{ required: true, message: '请输入规格模板名称', trigger: 'blur' }] 
            },
            specItem: '',
			isAddSpecValue:false
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const addSpecValue = () => {
            state.isAddSpecValue = true
        }
        const confirmAddSpecValue = () => {
            if(state.specItem !=null && state.specItem != ''){
                form.value['values'].push(state.specItem)
            }
            cancelAdd()
        }
        const cancelAdd = () => {
            state.specItem = ''
            state.isAddSpecValue = false
        }
        const delSpec = (index) => {
            form.value.values.splice(index, 1)
        }
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
					let data = form.value
					if(data.catelogId.length >0){
						let catelogId = data.catelogId[data.catelogId.length-1]
						data.catelogId = catelogId
					}
					// 修改
					if(data.id!=null && data.id!= ''){
					 update(data).then(res=>{
						 if(res.code == 0){
							ElMessage.success("修改成功");
							context.emit('onDetailSubmit', true)
						 }else{
							ElMessage.error("修改失败");
						 }
					 })
					 
					}
					// 新增
					else{
						create(data).then(res=>{
							if(res.code == 0){
							 ElMessage.success("添加成功");
							 context.emit('onDetailSubmit', true)
							}else{
							 ElMessage.error("添加失败");
							}
						})
						 
					}
                }
            })
        }
        const resetForm = (formEl) => {
            if (!formEl) return
            context.emit('update:dialogDrawer', false)
            formEl.resetFields()
        }
        return {
            drawer,
            form,
            close,
            delSpec,
            addSpecValue,
            confirmAddSpecValue,
            cancelAdd,
            submitForm,
            resetForm,
			ruleRefForm,
            ...toRefs(state)
        }
    }
}
</script>

<style>

</style>